<template>
  <h2 >求和为:{{ sum }}</h2>
  <h2>{{ tip }}</h2>
  <button @click="sum++">求和++</button>
  <button @click="tip += '--'">提示</button>
  <hr />
  <h1 >测试vue3生命周期</h1>
  
</template>
<script>
import {
  ref,
  watchEffect,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default {
  

  setup() {
    
    let sum = ref(0);
    let tip = ref("和变了");
    console.log("setup执行了");

    watchEffect(() => {
      const x1 = sum.value;
      const x2 = tip.value;
      console.log("watchEffect所指定的回调变了", x1, x2);
    });

    onBeforeMount(() => {
      console.log("----onBeforeMount---");
    });
    onMounted(() => {
      console.log("----onMounted---");
    });
   
    onBeforeUpdate(() => {
      console.log("----onBeforeUpdate---");
    });
    onUpdated(() => {
      console.log("----onUpdated---");
    });
    onBeforeUnmount(() => {
      console.log("----onBeforeUnmount---");
    });
    onUnmounted(() => {
      console.log("----onUnmounted---");
    });

    return {
      sum,
      tip,
      
    };
  },
};
</script>